import type { ComponentStyleIdType } from '../../types/interfaces'
import type { BadgePosition, BadgeProps, BadgeTheme, BadgeType } from './types'
import { UIComponent } from '../../lib/abstract'
import { ComponentStyleId } from '../../types/constants'
import { styles } from './styles'
import { ANIMATION, DEFAULT_BADGE_PROPS, THEME_COLORS } from './types'

export class Badge extends UIComponent<BadgeProps> {
  id: string = 'badge'
  readonly description: string = '徽章组件'
  readonly styleId: string = ComponentStyleId[this.name]
  element: JQuery<HTMLElement> | undefined = undefined

  get name(): ComponentStyleIdType {
    return 'Badge'
  }

  get className(): string {
    return 'badge'
  }

  constructor(props: BadgeProps) {
    super({
      ...DEFAULT_BADGE_PROPS,
      ...props,
    })

    // 注册样式
    this.registerStyles()
  }

  ELEMENT_SELECTORS = {
  }

  render(): string {
    const { id, type } = this.props
    const displayValue = this.getDisplayValue()
    const isDot = type === 'dot'

    if (!this.shouldShowBadge()) {
      return '<div class="badge"></div>'
    }

    return `
      <div id="${id}" class="${this.className}">
        <div class="badge-content" data-type="${type}" data-position="${this.props.position}">
          ${isDot ? '' : displayValue}
        </div>
      </div>
    `
  }

  /**
   * 获取显示值
   */
  private getDisplayValue(): string {
    const { value, max, showZero } = this.props

    if (typeof value === 'string')
      return value
    if (value === 0 && !showZero)
      return ''
    if (value && max && value > max)
      return `${max}+`
    return value?.toString() || ''
  }

  /**
   * 是否应该显示徽章
   */
  private shouldShowBadge(): boolean {
    const { value, showZero, type } = this.props
    return (value !== 0 && value !== '0') || (showZero || false) || type === 'dot'
  }

  getStyles(): string {
    return styles(this.className)
  }

  /**
   * 更新实例样式
   */
  private updateInstanceStyles(): void {
    const backgroundColor = this.props.color || (this.props.theme ? THEME_COLORS[this.props.theme] : THEME_COLORS.orange)
    const rippleAnimation = this.props.ripple ? ANIMATION : 'none'

    $(`#${this.props.id}`).css({
      '--badge-theme-color': backgroundColor,
      '--badge-ripple': rippleAnimation,
      '--badge-ripple-color-start': `${backgroundColor}99`, // 60% 透明度
      '--badge-ripple-color-end': `${backgroundColor}33`, //  20%透明度
    })

    $(`#${this.props.id} .badge-content`)
      .attr('data-type', this.props.type || 'rim')
      .attr('data-position', this.props.position || 'top-right')
  }

  /**
   * 更新徽章值
   * @param value 新值
   */
  updateValue(value: number | string): void {
    this.props.value = value
    this.rerender()
  }

  /**
   * 更新徽章类型
   * @param type 新类型
   */
  updateType(type: BadgeType): void {
    this.props.type = type
    this.rerender()
  }

  /**
   * 更新主题颜色
   */
  updateTheme(theme: BadgeTheme): void {
    this.props.theme = theme
    this.updateInstanceStyles()
  }

  /**
   * 更新位置
   */
  updatePosition(position: BadgePosition): void {
    this.props.position = position
    this.updateInstanceStyles()
  }

  /**
   * 重新渲染组件
   */
  private rerender(): void {
    if (!this.$element)
      return

    this.updateInstanceStyles()
  }

  bindEvents(): void {
    this.updateInstanceStyles()
  }

  destroy(): void {
    super.destroy()
  }
}
